<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>青云教育系统 - 教师端</title>
    <link rel="stylesheet" href="teacher.css">
</head>
<body>
    <div class="layout">
        <aside class="sidebar">
            <div class="brand">青云教育 · 教师端</div>
            <nav class="menu" id="menu">
                <button class="menu-item" data-view="profile" data-url="/index">教员信息及考勤</button>
                <button class="menu-item active" data-view="schedule" data-url="/schedule">教师课表</button>
                <button class="menu-item" data-view="password" data-url="/password">修改密码</button>
                <button class="menu-item" data-view="students" data-url="/students">学生信息</button>
                <button class="menu-item" data-view="upload" data-url="/postmaterial">上传资料</button>
                <button class="menu-item" data-view="download" data-url="/download">下载资料</button>
                <button class="menu-item" data-view="feedback" data-url="/feedback">课堂反馈</button>
                <button class="menu-item" data-view="myfeedback" data-url="/myfeedback">我的反馈</button>
            </nav>
        </aside>
        <main class="content">
            <header class="topbar">
                <div class="left">
                    <h1 id="view-title">教师课表</h1>
                </div>
                <div class="right">
                    <div class="user-info">
                        <img id="user-avatar" class="user-avatar" src="" alt="用户头像">
                        <span id="teacher-name" class="user-name"></span>
                    </div>
                    <button id="logoutBtn" class="btn btn-secondary">退出登录</button>
                </div>
            </header>

            <section id="view-profile" class="view" style="display:none;">
                <div class="card">
                    <div class="card-header">个人信息</div>
                    <div class="card-body">
                        <div class="profile-info">
                            <div class="profile-avatar">
                                <img id="profile-avatar" class="large-avatar" src="" alt="头像">
                            </div>
                            <div class="profile-details">
                                <div class="info-row">
                                    <label>姓名：</label>
                                    <span id="profile-name"></span>
                                </div>
                                <div class="info-row">
                                    <label>教师编号：</label>
                                    <span id="profile-account"></span>
                                </div>
                                <div class="info-row">
                                    <label>权限等级：</label>
                                    <span id="profile-permission"></span>
                                </div>
                                <div class="info-row">
                                    <label>入职时间：</label>
                                    <span id="profile-create-time"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">考勤统计</div>
                    <div class="card-body">
                        <div class="attendance-stats">
                            <div class="stat-item">
                                <div class="stat-number" id="total-days">0</div>
                                <div class="stat-label">本月工作日</div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-number" id="normal-days">0</div>
                                <div class="stat-label">正常出勤</div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-number" id="late-days">0</div>
                                <div class="stat-label">迟到次数</div>
                            </div>
                            <div class="stat-item">
                                <div class="stat-number" id="absent-days">0</div>
                                <div class="stat-label">缺勤次数</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="card">
                    <div class="card-header">考勤记录</div>
                    <div class="card-body">
                        <div class="attendance-filters">
                            <label>
                                月份：
                                <input type="month" id="attendanceMonth" value="">
                            </label>
                            <button id="refreshAttendance" class="btn btn-primary">刷新考勤</button>
                        </div>
                        <div class="attendance-table-wrapper">
                            <table class="attendance-table">
                                <thead>
                                    <tr>
                                        <th>日期</th>
                                        <th>星期</th>
                                        <th>签到时间</th>
                                        <th>签退时间</th>
                                        <th>工作时长</th>
                                        <th>状态</th>
                                    </tr>
                                </thead>
                                <tbody id="attendanceBody">
                                </tbody>
                            </table>
                            <div id="attendanceEmpty" class="empty" style="display:none;">暂无考勤记录</div>
                        </div>
                    </div>
                </div>
            </section>

            <section id="view-schedule" class="view" style="display:block;">
                <div class="card">
                    <div class="card-header">
                        <div class="filters">
                            <label>
                                选择日期：
                                <input type="date" id="datePicker">
                            </label>
                            <button id="refreshSchedule" class="btn btn-primary">刷新课表</button>
                        </div>
                    </div>
                    <div class="card-body">
                        <div id="scheduleContainer" class="schedule-table-wrapper">
                            <div class="week-schedule">
                                <div class="week-header">
                                    <div class="week-title">周课表</div>
                                    <div class="week-date-range" id="weekDateRange"></div>
                                </div>
                                <div class="schedule-grid">
                                    <!-- 第一行：星期标题 -->
                                    <div class="schedule-row header-row">
                                        <div class="schedule-cell header-cell">时间</div>
                                        <div class="schedule-cell header-cell" id="monday">周一</div>
                                        <div class="schedule-cell header-cell" id="tuesday">周二</div>
                                        <div class="schedule-cell header-cell" id="wednesday">周三</div>
                                        <div class="schedule-cell header-cell" id="thursday">周四</div>
                                        <div class="schedule-cell header-cell" id="friday">周五</div>
                                        <div class="schedule-cell header-cell" id="saturday">周六</div>
                                        <div class="schedule-cell header-cell" id="sunday">周日</div>
                                    </div>
                                    <!-- 第二行：上午第一节 -->
                                    <div class="schedule-row">
                                        <div class="schedule-cell time-cell">08:00-09:35</div>
                                        <div class="schedule-cell" id="monday-1"></div>
                                        <div class="schedule-cell" id="tuesday-1"></div>
                                        <div class="schedule-cell" id="wednesday-1"></div>
                                        <div class="schedule-cell" id="thursday-1"></div>
                                        <div class="schedule-cell" id="friday-1"></div>
                                        <div class="schedule-cell" id="saturday-1"></div>
                                        <div class="schedule-cell" id="sunday-1"></div>
                                    </div>
                                    <!-- 第三行：上午第二节 -->
                                    <div class="schedule-row">
                                        <div class="schedule-cell time-cell">10:00-11:35</div>
                                        <div class="schedule-cell" id="monday-2"></div>
                                        <div class="schedule-cell" id="tuesday-2"></div>
                                        <div class="schedule-cell" id="wednesday-2"></div>
                                        <div class="schedule-cell" id="thursday-2"></div>
                                        <div class="schedule-cell" id="friday-2"></div>
                                        <div class="schedule-cell" id="saturday-2"></div>
                                        <div class="schedule-cell" id="sunday-2"></div>
                                    </div>
                                    <!-- 第四行：下午第一节 -->
                                    <div class="schedule-row">
                                        <div class="schedule-cell time-cell">14:00-15:35</div>
                                        <div class="schedule-cell" id="monday-3"></div>
                                        <div class="schedule-cell" id="tuesday-3"></div>
                                        <div class="schedule-cell" id="wednesday-3"></div>
                                        <div class="schedule-cell" id="thursday-3"></div>
                                        <div class="schedule-cell" id="friday-3"></div>
                                        <div class="schedule-cell" id="saturday-3"></div>
                                        <div class="schedule-cell" id="sunday-3"></div>
                                    </div>
                                    <!-- 第五行：下午第二节 -->
                                    <div class="schedule-row">
                                        <div class="schedule-cell time-cell">16:00-17:35</div>
                                        <div class="schedule-cell" id="monday-4"></div>
                                        <div class="schedule-cell" id="tuesday-4"></div>
                                        <div class="schedule-cell" id="wednesday-4"></div>
                                        <div class="schedule-cell" id="thursday-4"></div>
                                        <div class="schedule-cell" id="friday-4"></div>
                                        <div class="schedule-cell" id="saturday-4"></div>
                                        <div class="schedule-cell" id="sunday-4"></div>
                                    </div>
                                </div>
                            </div>
                            <div id="scheduleEmpty" class="empty" style="display:none;">暂无课程安排</div>
                        </div>
                    </div>
                </div>
            </section>

            <section id="view-password" class="view" style="display:none;">
                <div class="card">
                    <div class="card-header">修改密码</div>
                    <div class="card-body">
                        <form id="passwordForm" class="form">
                            <div class="form-group"><label>当前密码</label><input type="password" id="oldPassword" required></div>
                            <div class="form-group"><label>新密码</label><input type="password" id="newPassword" required></div>
                            <div class="form-group"><label>确认新密码</label><input type="password" id="confirmPassword" required></div>
                            <button type="submit" class="btn btn-primary">提交修改</button>
                            <div id="passwordMsg" class="message" style="display:none;"></div>
                        </form>
                    </div>
                </div>
            </section>

            <section id="view-students" class="view" style="display:none;">
                <div class="card">
                    <div class="card-header">我的学生</div>
                    <div class="card-body">
                        <div class="filters">
                            <input type="text" id="studentSearch" placeholder="输入学生姓名/学号搜索">
                            <button id="searchStudentBtn" class="btn btn-primary">搜索</button>
                        </div>
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>学生姓名</th>
                                    <th>学号</th>
                                    <th>联系方式</th>
                                    <th>剩余课时</th>
                                </tr>
                            </thead>
                            <tbody id="studentTableBody"></tbody>
                        </table>
                        <div id="studentEmpty" class="empty" style="display:none;">暂无学生信息</div>
                    </div>
                </div>
            </section>

            <section id="view-upload" class="view" style="display:none;">
                <div class="card">
                    <div class="card-header">上传资料（Word/PDF）</div>
                    <div class="card-body">
                        <form id="uploadForm" class="form" enctype="multipart/form-data">
                            <div class="form-group"><label>选择文件</label><input type="file" id="materialFile" accept=".doc,.docx,.pdf" required></div>
                            <div class="form-group"><label>资料名称</label><input type="text" id="materialTitle" placeholder="请输入资料标题" required></div>
                            <button type="submit" class="btn btn-primary">上传</button>
                            <div id="uploadMsg" class="message" style="display:none;"></div>
                        </form>
                    </div>
                </div>
            </section>

            <section id="view-download" class="view" style="display:none;">
                <div class="card">
                    <div class="card-header">资料中心</div>
                    <div class="card-body">
                        <div id="materialList" class="material-list"></div>
                        <div id="materialEmpty" class="empty" style="display:none;">暂无可下载资料</div>
                    </div>
                </div>
            </section>

            <section id="view-feedback" class="view" style="display:none;">
                <div class="card">
                    <div class="card-header">课堂反馈</div>
                    <div class="card-body">
                        <form id="feedbackForm" class="form" enctype="multipart/form-data">
                            <div class="form-group"><label>课程/班级</label><input type="text" id="feedbackCourse" placeholder="如：高一数学A班 第3节"></div>
                            <div class="form-group"><label>课堂反馈</label><textarea id="feedbackText" rows="4" placeholder="课堂情况、学生表现、作业布置等"></textarea></div>
                            <div class="form-group"><label>上传照片</label><input type="file" id="feedbackPhotos" accept="image/*" multiple></div>
                            <button type="submit" class="btn btn-primary">提交反馈</button>
                            <div id="feedbackMsg" class="message" style="display:none;"></div>
                        </form>
                    </div>
                </div>
            </section>
        </main>
    </div>

    <script src="teacher.js"></script>
    <script>
        // 添加菜单点击事件处理
        document.addEventListener('DOMContentLoaded', function() {
            const menu = document.getElementById('menu');
            const viewTitle = document.getElementById('view-title');
            
            menu.addEventListener('click', function(e) {
                const btn = e.target.closest('.menu-item');
                if (!btn) return;
                
                // 移除所有active状态
                menu.querySelectorAll('.menu-item').forEach(item => item.classList.remove('active'));
                // 添加当前active状态
                btn.classList.add('active');
                
                const view = btn.getAttribute('data-view');
                const url = btn.getAttribute('data-url');
                
                // 隐藏所有视图
                document.querySelectorAll('.view').forEach(v => v.style.display = 'none');
                
                // 检查是否需要跳转到独立页面
                if(view === 'upload'){
                    window.location.href = location.origin + '/teacher/postmaterial';
                    return;
                }
                
                if(view === 'download'){
                    window.location.href = location.origin + '/teacher/downloadmaterial';
                    return;
                }
                
                if(view === 'students'){
                    window.location.href = location.origin + '/teacher/students';
                    return;
                }
                
                // 显示对应视图（只有非跳转的视图才显示）
                const targetView = document.getElementById(`view-${view}`);
                if (targetView) {
                    targetView.style.display = 'block';
                    viewTitle.textContent = btn.textContent;
                    
                    // 如果是课表视图，初始化课表
                    if (view === 'schedule') {
                        if (typeof initSchedule === 'function') {
                            initSchedule();
                        }
                    }
                }
            });
        });
    </script>
</body>
</html> 